<template>
	<view class="ranking-container">
		<image class="ranking-bg" :src="getRankingBg" />
		<text class="ranking-text" :class="{'text-white':ranking <= 3}">{{ranking}}</text>
	</view>
</template>

<script>
	export default {
		name: "hot-ranking",
		props: {
			ranking: {
				type: Number,
				required: true
			}
		},
		data() {
			return {};
		},
		computed: {
			// 每个极端属性都必须要有一个 返回值
			getRankingBg() {
				if (this.ranking <= 3) {
					// 动态导入图片资源
					return require(`@/static/images/ranking-${this.ranking}.png`);
				} 
				return require('@/static/images/ranking-other.png');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ranking-container {
		position: relative;
		text-align: center;
		width: 18px;
		height: 20px;

		.ranking-bg {
			width: 100%;
			height: 100%;
		}

		.ranking-text {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-55%, -55%);
			font-size: $uni-font-size-sm;
			font-weight: bold;
			color: $uni-text-color;
		}
		.text-white{
			color: white;
		}
	}
</style>
